<!DOCTYPE html>
<html lang="zh_CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>手写板</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport"
    content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

  <!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

  <!-- 固定的css 和 common.js 的引用    -->
  <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm.min.css">
  <!--<link rel="stylesheet" href="../css/sm-extend.min.css">-->
  <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/common.css">
  <script type="text/javascript" src="http://47.104.254.28/commonfile/common/common/common.js"></script>

  <!-- <link rel="stylesheet" href="../../css/sm.min.css">
  <link rel="stylesheet" href="../../css/common.css">
  <script type="text/javascript" src="../../common/common/common.js"></script> -->

  <!-- <script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/vconsole.min.js"></script>
		<script>
			var vConsole = new VConsole();
		</script> -->



  <style type="text/css">
    #write-wrap {
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.2);
      z-index: 1000;
      display: flex;
      flex-direction: column;
    }

    .write-nav {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 2.2rem;
      padding: 0 0.75rem;
      background: #a1a1a1;
      position: relative;
    }

    .write-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      line-height: 2.2rem;
    }

    .canvas-box {
      flex: 1;
      width: 100%;
      overflow: hidden;
      position: relative;
    }

    .canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }


    .write-nav .write-nav-left {}

    .write-nav .write-nav-right {
      display: flex;
    }

    .write-nav-right .write-nav_icon {
      margin-left: 0.5rem;
    }

    .write-nav_icon img {
      display: block;
      width: 1rem;
      height: 1rem;
      object-fit: contain;
    }
  </style>


</head>

<body>
  <div class="page-group">
    <div class="page page-current">
      <div id="" style="width: 100%;height: 100%;">
        <!-- html代码内容区域 -->
        <div class="content" id="tilei_centent">
          <div id="write-wrap" class="write-box">
            <div class="write-nav">
              <div class="write-nav-left">
                <div class="write-nav_icon" onclick="closeWrite()">
                  <img src="http://47.104.254.28/commonfile/img/img/icon/times.png" alt="">
                </div>
              </div>
              <div class="write-nav-right">
                <div class="write-nav_icon" onclick="cUndo()">
                  <img src="http://47.104.254.28/commonfile/img/img/icon/undo.png" alt="">
                </div>
                <div class="write-nav_icon" onclick="drawImage()">
                  <img src="http://47.104.254.28/commonfile/img/img/icon/delete.png" alt="">
                </div>
                <div class="write-nav_icon" onclick="cRedo()">
                  <img src="http://47.104.254.28/commonfile/img/img/icon/redo.png" alt="">
                </div>
              </div>

              <div class="write-title">
                <span>手写板</span>
              </div>
            </div>
            <div class="canvas-box">
              <canvas id="myCanvas" class="canvas"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>



  <!-- <script type="text/javascript"
		src="../../js/js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript">var $$ = jQuery.noConflict();</script>
	<script type='text/javascript' src='../../zepto/zepto/zepto.min.js'
		charset='utf-8'></script>
	<script type='text/javascript' src='../../js/js/sm.min.js'
		charset='utf-8'></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script> -->


  <!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
  <script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/jquery-1.11.1.min.js"></script>
  <script type="text/javascript">var $$ = jQuery.noConflict();</script>
  <script type='text/javascript' src='http://47.104.254.28/commonfile/zepto/zepto/zepto.min.js'
    charset='utf-8'></script>
  <script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm.min.js' charset='utf-8'></script>
  <script src="http://47.104.254.28/commonfile/js/js/canvasdraw.js"></script>
  <!-- <script src="../../js/js/canvasdraw.js"></script> -->

  <script type="text/javascript">

    function closeWrite() {
      localStorage.setItem('write_' + curuserid, JSON.stringify(cPushArray));
      localStorage.setItem('write_cStep_' + curuserid, cStep);
      native_goto("local/finish");
    }
    setTimeout(() => {
      getWrite();
    }, 1000)

    function getWrite() {
      cPushArray = localStorage.getItem('write_' + curuserid) ? JSON.parse(localStorage.getItem('write_' + curuserid)) : [];
      cStep = localStorage.getItem('write_cStep_' + curuserid) || -1;
      isClearDraw = true;
     
      setTimeout(() => {
        drawImage();
      }, 1)
    }
    $$(function () {
      InitThis();
      $.init();

    });

  </script>
</body>

</html>